<template>
	<view class="search x-c">
	<slot name="left"></slot>
		<!-- <view @tap="goTuUser"><image src="../../../static/imgs/icons/user_btn.png" class="iconSize usericon"></image></view> -->
		<view class="search-box x-c shopro-selector-rect" @tap="jump('/pages/goods/list', { keywords: detail.content })">
			<text class="cuIcon-search"></text>
			<text class="search-val">{{ detail.content || '搜索' }}</text>
		</view>
		<slot name="right1"></slot>
		<slot name="right2"></slot>
	</view>
</template>

<script>
/**
 * 自定义之搜索样式卡片
 * @property {Object} detail - 搜索信息
 * @property {String} bgcolor - 背景颜色
 */
export default {
	components: {},
	data() {
		return {};
	},
	props: {
		detail: {
			type: Object,
			default: null
		}
	},
	computed: {},
	methods: {
		jump(path, params) {
			this.$Router.push({
				path: path,
				params: params
			});
		}
		
	}
};
</script>

<style lang="scss">
.search {
	position: fixed !important;
	height: 165rpx;
	width: 750rpx;
	background: #fff;
	transition: all linear 0.3s;
	background: #6ec0ff;
	z-index: 100;
	display: flex;
	// justify-content: center;
	align-items: flex-end;
	padding: 20rpx;
	// #ifdef MP-WEIXIN
		height: 265rpx;
	// #endif
	
}


.search-box {
	height: 64rpx;
	width: 450rpx;
	background: #f5f5f5;
	border-radius: 50rpx;
	transform: translateX(-7%);

	.cuIcon-search {
		font-size: 36rpx;
		margin-right: 20rpx;
	}

	.search-val {
		font-size: 30rpx;
	}
}
// .iconSize{
// 	height: 70rpx;
// 	width: 70rpx;
// }
// .usericon{
// 	position: absolute;
// 	left: 40rpx;
// 	top: 80rpx;
// }

</style>
